<template>
  <a-button
    :class="className"
    :type="type"
    :block="block"
    :danger="danger"
    :disabled="disabled"
    :ghost="ghost"
    :html-type="htmlType"
    :loading="loading"
    :shape="shape"
    :size="size"
    @click="click"
  >
    <template v-if="icon" #icon>
      <r-h-icon class="icon" v-bind="icon" />
    </template>
    <div style="display: inline-block; width: 70%">
      {{ title }}
    </div>
  </a-button>
</template>

<script lang="ts">
import RHIcon from '@/components/RHIcon/index.vue'
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'RHButton',
  components: { RHIcon },
  props: {
    className: {
      type: String,
      default: 'RHButton'
    },
    title: {
      type: String,
      require: true
    },
    code: {
      type: String,
      default: 'RHButton'
    },
    icon: {
      type: Object,
      default: null
    },
    /**
     * 将按钮宽度调整为其父宽度的选项
     */
    block: {
      type: Boolean,
      default: false
    },
    /**
     * 设置危险按钮
     */
    danger: {
      type: Boolean,
      default: null
    },
    /**
     * 按钮失效状态
     */
    disabled: {
      type: Boolean,
      default: null
    },
    /**
     * 幽灵属性，使按钮背景透明
     */
    ghost: {
      type: Boolean,
      default: null
    },
    /**
     * 	设置 button 原生的 type 值，可选值请参考 HTML 标准	string	button
     */
    htmlType: {
      type: String,
      default: null
    },
    /**
     * 	设置按钮载入状态
     */
    loading: {
      type: Boolean || { delay: Number },
      default: false
    },
    /**
     * 	设置按钮形状
     */
    shape: {
      type: String,
      validator(value:any) {
        return ['circle', 'round'].includes(value)
      },
      default: null
    },
    /**
     * 	设置按钮大小
     */
    size: {
      type: String,
      validator(value:any) {
        return ['large', 'middle', 'small'].includes(value)
      },
      default: 'middle'
    },
    /**
     * 设置按钮类型
     */
    type: {
      type: String,
      validator(value:any) {
        return [
          'primary',
          'ghost',
          'dashed',
          'link',
          'text',
          'default'
        ].includes(value)
      },
      default: null
    },
    click: {
      type: Function,
      default() {
        console.log(' click ')
      }
    }
  }
})
</script>

<style scoped>
.RHButton {
  margin: 5px;
}
.icon {
  width: 30%;
  margin: 0px 5px 0px 0px;
}
</style>
